<template>
  <div>
    <i
      class="fa star"
      :class="i<=tempscore ?'fa-star':'fa-star-o'"
      v-for="i in count"
      @click="s = i"
      @mouseout="tempscore = s"
      @mouseover="tempscore = i"
    ></i>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      default: 5,
      type: Number
    },
    value: {
      default: 0,
      type: Number
    }
  },
  watch: {
    s(val) {
      this.$emit("input", val);
    }
  },
  data() {
    return {
      s: this.value,
      tempscore: this.value
    };
  }
};
</script>

<style>
.star {
  color: gold;
}
</style>
